<!-- 来煤计划 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage,ElLoading, ElMessageBox, type FormInstance } from 'element-plus'

// table-list 搜索
const searchTime = ref('')

const searchTimeIndex = ref(0)
function clickSearchTime(index: number) {
    searchTimeIndex.value = index
    searchTime.value = ''
}


//table设置
const tableHeight = ref(0)
let listTableData = ref([])

// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}


//table样式自定义
const headerCellStyle = {
    padding: '16px 0'
}


const tableDialogVisible = ref(false)
function clickTableDialog() {
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}



const stateOptions = [
    {
        value: '0',
        label: '未到达',
    },
    {
        value: '1',
        label: '已到达、未离岸',
    },
    {
        value: '2',
        label: '已到达、已离岸',
    }
]


// 新增
const addDialogVisible = ref(false)

const formInline = reactive({
  name1: '',
  name2: '',
  name3: '',
  name4: '',
  name5: '',
  name6: '',
  name7: '',
  name8: '',
  name9: '',
})


const checkedVal = ref('')

// 修改
const editDialogVisible = ref(false)
const infoDialogVisible = ref(false)

//预测
const forecastVisible = ref(false)



// 时间下拉框
const shortcuts = [
    {
        text: '近3天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            return [start, end]
        },
    },
    {
        text: '近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },

]

import { CoalInPlanList, AllFuelTypeList, AllSupplierMsgList, addCoalInPlan, delCoalInPlan, CoalInPlanInfo, editCoalInPlan, CoalInPlanPredict } from "@/api";

// 搜索
const searchForm = ref({
    shipNo: '',
    shipName: '',
    currentStatus: '',
    BeginActureInTime: '',
    EndActureInTime: '',
    PageNum: 1, //当前页码
    PageSize: 10, //PageSize
    searchFormTime: []
})
function changeSearchTime(e: any) {
    //searchForm.value.BeginActureInTime = e[0]
    //searchForm.value.EndActureInTime = e[1]
    //console.log(searchForm)
}
const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    getBunkerInRecordList()
}

const totalPage = ref(0)

//list
function getBunkerInRecordList(){
    console.log(searchForm.value)
    searchForm.value.BeginActureInTime = searchForm.value.searchFormTime[0]
    searchForm.value.EndActureInTime = searchForm.value.searchFormTime[1]
    CoalInPlanList(searchForm.value).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}


//煤炭种类
interface CoalTypes {
    ftId: number;
    ftName: string;
    ftCode: string;
}
let coalTypes = ref<CoalTypes[]>([])
function getAllFuelTypeList(){
    AllFuelTypeList().then(res=>{
        coalTypes.value = res.data
        //console.log(res.data)
    })
}

// 供应商
let supplierData = ref<any>([])
function getAllSupplierMsgList(){
    AllSupplierMsgList().then(res=>{
        supplierData.value = res.data
        //console.log('供应商----',res.data)
    })
}

const addForm = ref<any>({
    shipNo: '',
    shipName: '',
    suplierId: '',
    entryQuality: '',
    berthingDock:'',

    planArriveTime: '',
    planInTime: '',
    planWeight:'',
    palnInRecordDetailViews:[
        {
            batchNo:'',
            ftId: '',
            heatValue: '',
            weight:'',
        }
    ]
})
function clickAddInfoData(){
    addForm.value.palnInRecordDetailViews.push({
        batchNo:'',
        ftId: '',
        heatValue: '',
        weight:'',
    })
}
function clickDelInfoData(index:number){
    addForm.value.palnInRecordDetailViews.splice(index, 1);
}
//新增
const clickAddPlan = async (formEl: FormInstance | undefined) => {
    console.log(addForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addCoalInPlan(addForm.value).then(res=>{
                console.log('新增----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    getBunkerInRecordList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
        console.log('error submit!', fields)
        }
    })
}


// 删除
const clickDelCoalInPlan = (id:number) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delCoalInPlan(id).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getBunkerInRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}

// 详情 
let planInfo = ref<any>({})
function getCoalInPlanInfo(id:number){
    CoalInPlanInfo(id).then(res=>{
        console.log('详情----',res.data)
        planInfo.value = res.data
        infoDialogVisible.value = true
    })
}

// 修改--先获取详情赋值--在修改
function clickShowEditDialog(id:number){
    CoalInPlanInfo(id).then(res=>{
        console.log('详情----',res.data)
        addForm.value = res.data
        editDialogVisible.value = true
    })
}
function clickEditCoalInPlan(){
    editCoalInPlan(addForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            editDialogVisible.value = false
            getBunkerInRecordList()
            addForm.value = ref({
                shipNo: '',
                shipName: '',
                suplierId: '',
                entryQuality: '',
                berthingDock:'',

                planArriveTime: '',
                planInTime: '',
                planWeight:'',
                palnInRecordDetailViews:[
                    {
                        batchNo:'',
                        ftId: '',
                        heatValue: '',
                        weight:'',
                    }
                ]
            })
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 预测
const formForecast = ref({
    month:'Current',
    plannedQoE:'',
    plannedDailyConsumption:'',
    plannedUnitsToRun:'',
    plannedDailyUnitConsumption:'',
})
const PredictData = ref<any>({})
const postCoalInPlanPredict = (formEl: FormInstance | undefined) => {
    // if(!formForecast.value.plannedQoE){
    //     ElMessage.error('请输入本月计划电量')
    //     return
    // }
    // if(!formForecast.value.plannedDailyConsumption){
    //     ElMessage.error('请输入计划日耗煤')
    //     return
    // }
    // if(!formForecast.value.plannedUnitsToRun){
    //     ElMessage.error('请输入运行机组数量')
    //     return
    // }
    // if(!formForecast.value.plannedDailyUnitConsumption){
    //     ElMessage.error('请输入每日耗煤')
    //     return
    // }
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
            CoalInPlanPredict({
                "month": formForecast.value.month,
                "plannedQoE": formForecast.value.plannedQoE,
                "plannedDailyConsumption": formForecast.value.plannedDailyConsumption,
                "plannedUnitsToRun": formForecast.value.plannedUnitsToRun,
                "plannedDailyUnitConsumption": formForecast.value.plannedDailyUnitConsumption,
            }).then(res=>{
                console.log('预测----',res.data)
                if(res.code === 200){
                    forecastTimeVisible.value = false
                    forecastVisible.value = true
                    PredictData.value = res.data
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
            console.log('error submit!')
        }
    })
    
}

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delCoalInPlan(ids).then(res=>{
            console.log('删除----',res)
            loading.close()
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getBunkerInRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}

const ruleFormRef = ref<FormInstance>()
const rules = ref({
    suplierId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    shipNo: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    shipName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    planArriveTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    planInTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})
const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const forecastTimeVisible = ref(false)
const ruleForecastFormRef = ref<FormInstance>()

const rulesForecast = ref({
    month:[
        { required: true, message: '请选择', trigger: 'change' },
    ],
    plannedQoE:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    plannedDailyConsumption:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    plannedUnitsToRun:[
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    plannedDailyUnitConsumption:[
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})

const resetForecastForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getBunkerInRecordList()
    getAllFuelTypeList()
    getAllSupplierMsgList()
});
</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增来煤计划" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto" >
                <el-form-item label="航次:" prop="shipNo">
                    <el-input v-model="addForm.shipNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="船名:" prop="shipName">
                    <el-input v-model="addForm.shipName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="供应商名称:" prop="suplierId">
                    <el-select v-model="addForm.suplierId" placeholder="请选择">
                        <el-option v-for="(item,index) in supplierData"
                            :key="item.id"
                            :label="item.supplierName"
                            :value="item.id"
                        />
                    </el-select>
                    <!-- <img class="add_supl" src="../../assets/img/ico_add.png" alt=""> -->
                </el-form-item>
                <el-form-item label="入厂质量验收:" prop="entryQuality">
                    <el-input v-model="addForm.entryQuality" placeholder="请输入"  />
                </el-form-item>
                <el-form-item label="靠泊码头:"  prop="berthingDock">
                    <el-input v-model="addForm.berthingDock" placeholder="请输入"  />
                </el-form-item>
                <div class="form_title">计划</div>
                <el-form-item label="计划到厂时间:"  prop="planArriveTime">
                    <el-date-picker v-model="addForm.planArriveTime" type="date" placeholder="请选择" clearable />
                </el-form-item>
                <el-form-item label="计划靠泊时间:" prop="planInTime">
                    <el-date-picker v-model="addForm.planInTime" type="date" placeholder="请选择" clearable />
                </el-form-item>
                <!-- <el-form-item label="计划离岸时间:">
                    <el-date-picker v-model="formInline.name3" type="date" placeholder="请选择" clearable />
                </el-form-item> -->
                <el-form-item label="计划来煤重量:" prop="planWeight">
                    <el-input v-model="addForm.planWeight" placeholder="请输入" clearable />
                </el-form-item>
            </el-form>
            <div class="form_title">来煤计划明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="10%">
                    </colgroup>
                    <tr>
                        <th>批次号</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>重量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in addForm.palnInRecordDetailViews">
                        <td>
                            <el-input v-model="item.batchNo" input-style="text-al" placeholder="填写批次号或对接口获取" />
                        </td>
                        <td>
                            <el-select v-model="item.ftId" placeholder="请选择"  >
                                <el-option
                                    v-for="item in coalTypes"
                                    :key="item.ftId"
                                    :label="item.ftName"
                                    :value="item.ftId"
                                />
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="item.heatValue" placeholder="" />
                        </td>
                        <td>
                            <el-input v-model="item.weight" placeholder="" />
                        </td>
                        <td>
                            <img @click="clickDelInfoData(index)" src="../../assets/img/ico_del.png" alt="">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="mt15" @click="clickAddInfoData">
                <img src="../../assets/img/ico_add.png" alt="">
            </div>
            <div class="checkbox_zd">
                <el-checkbox v-model="checkedVal" label="自动记录到“来煤记录”" />
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="clickAddPlan(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改来煤计划" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="formInline" class="mt15 form-inline-row-two" label-width="100">
                <el-form-item label="航次:">
                    <el-input v-model="addForm.shipNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="船名:">
                    <el-input v-model="addForm.shipName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="供应商名称:">
                    <el-select v-model="addForm.suplierId" placeholder="请选择">
                        <el-option v-for="(item,index) in supplierData"
                            :key="item.id"
                            :label="item.supplierName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="入厂质量验收:">
                    <el-input v-model="addForm.entryQuality" placeholder="请输入"  />
                </el-form-item>
                <el-form-item label="靠泊码头:">
                    <el-input v-model="addForm.berthingDock" placeholder="请输入"  />
                </el-form-item>
                <div class="form_title">计划</div>
                <el-form-item label="计划到厂时间:">
                    <el-date-picker v-model="addForm.planArriveTime" type="date" placeholder="请选择" clearable />
                </el-form-item>
                <el-form-item label="计划靠泊时间:">
                    <el-date-picker v-model="addForm.planInTime" type="date" placeholder="请选择" clearable />
                </el-form-item>
                <!-- <el-form-item label="计划离岸时间:">
                    <el-date-picker v-model="formInline.name3" type="date" placeholder="请选择" clearable />
                </el-form-item> -->
                <el-form-item label="计划来煤重量:">
                    <el-input v-model="addForm.planWeight" placeholder="请输入" clearable />
                </el-form-item>
            </el-form>

            <div class="form_title">实际</div>
            <ul class="edit_info">
                <li>
                    <span>实际靠泊时间:</span>
                    <p>{{ addForm.actureInTime }}</p>
                </li>
                <li>
                    <span>实际离岸时间:</span>
                    <p>{{ addForm.actureOutTime }}</p>
                </li>
                <li>
                    <span>实际来煤重量:</span>
                    <p>{{ addForm.actureWeight }}</p>
                </li>
            </ul>
            <div class="form_title">偏差</div>
            <ul class="edit_info">
                <li>
                    <span>靠岸时间偏差:</span>
                    <p><strong class="red"></strong></p>
                </li>
                <li>
                    <span>离岸时间偏差:</span>
                    <p><strong class="red"></strong></p>
                </li>
                <li>
                    <span>来煤重量偏差:</span>
                    <p><strong class="red"></strong></p>
                </li>
                <li>
                    <span>备注/原因:</span>
                    <p>{{ addForm.remark }}</p>
                </li>
            </ul>

            <div class="form_title">来煤计划明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="10%">
                    </colgroup>
                    <tr>
                        <th>批次号</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>重量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in addForm.palnInRecordDetailViews">
                        <td>
                            <el-input v-model="item.batchNo" input-style="text-al" placeholder="填写批次号或对接口获取" />
                        </td>
                        <td>
                            <el-select v-model="item.ftId" placeholder="请选择"  >
                                <el-option
                                    v-for="item in coalTypes"
                                    :key="item.ftId"
                                    :label="item.ftName"
                                    :value="item.ftId"
                                />
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="item.heatValue" placeholder="" />
                        </td>
                        <td>
                            <el-input v-model="item.weight" placeholder="" />
                        </td>
                        <td>
                            <img @click="clickDelInfoData(index)" src="../../assets/img/ico_del.png" alt="">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="mt15" @click="clickAddInfoData">
                <img src="../../assets/img/ico_add.png" alt="">
            </div>
            <div class="checkbox_zd">
                <el-checkbox v-model="checkedVal" label="自动记录到“来煤记录”" />
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="clickEditCoalInPlan">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="来煤计划详情" width="900" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info mt15">
                <li>
                    <span>航次:</span>
                    <p>{{ planInfo.shipNo }}</p>
                </li>
                <li>
                    <span>船名:</span>
                    <p>{{ planInfo.shipName }}</p>
                </li>
                <li>
                    <span>供应商名称:</span>
                    <p>{{ planInfo.suplierId }}</p>
                </li>
                <li>
                    <span>入厂质量验收:</span>
                    <p>{{ planInfo.entryQuality }}</p>
                </li>
                <li>
                    <span>靠泊码头:</span>
                    <p>{{ planInfo.berthingDock }}</p>
                </li>
            </ul>
            <div class="form_title">计划</div>
            <ul class="edit_info">
                <li>
                    <span>计划到厂时间:</span>
                    <p>{{ planInfo.planArriveTime }}</p>
                </li>
                <li>
                    <span>计划靠泊时间:</span>
                    <p>{{ planInfo.planInTime }}</p>
                </li>
                <li>
                    <span>计划来煤重量:</span>
                    <p>{{ planInfo.planWeight }}</p>
                </li>
            </ul>
            <div class="form_title">实际</div>
            <ul class="edit_info">
                <li>
                    <span>实际靠泊时间:</span>
                    <p>{{ planInfo.actureInTime }}</p>
                </li>
                <li>
                    <span>实际离岸时间:</span>
                    <p>{{ planInfo.actureOutTime }}</p>
                </li>
                <li>
                    <span>实际来煤重量:</span>
                    <p>{{ planInfo.actureWeight }}</p>
                </li>
            </ul>
            <div class="form_title">偏差</div>
            <ul class="edit_info">
                <li>
                    <span>靠岸时间偏差:</span>
                    <p><strong class="">{{ planInfo.inTimeOffset }}</strong></p>
                </li>
                <li>
                    <span>离岸时间偏差:</span>
                    <p><strong class="">{{ planInfo.outTimeOffset }}</strong></p>
                </li>
                <li>
                    <span>来煤重量偏差:</span>
                    <p><strong class="">{{ planInfo.planWeight - planInfo.actureWeight }}</strong></p>
                </li>
                <li>
                    <span>备注/原因:</span>
                    <p>{{ planInfo.remark }}</p>
                </li>
            </ul>

            <div class="form_title">来煤计划明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tr>
                        <th>批次号</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>重量</th>
                    </tr>
                    <tr v-for="(item,index) in planInfo.palnInRecordDetailViews">
                        <td>
                            {{ item.batchNo }}
                        </td>
                        <td>
                            {{ item.ftId }}
                        </td>
                        <td>
                            {{ item.heatValue }}
                        </td>
                        <td>
                            {{ item.weight }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </el-dialog>

    <!-- 弹出框/预测-时间条件 -->
    <el-dialog v-model="forecastTimeVisible" title="煤船接卸预测" width="520"  :align-center="true">
        <div class="dialog_main">
            <div style="padding:15px 0;">
                <el-alert title="提示:请设置以下数据，设置后将会自动生成接卸预测报告" type="warning" show-icon :closable="false" />
            </div>
            <el-form ref="ruleForecastFormRef" :rules="rulesForecast" :inline="true" :model="formForecast" label-width="auto" label-position="left">
                <el-form-item label="时间:" prop="month">
                    <el-radio-group v-model="formForecast.month">
                        <el-radio-button label="本月" value="Current" />
                        <el-radio-button label="下一个月" value="Next" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="测此月计划电量:" prop="plannedQoE">
                    <el-input type="number" v-model="formForecast.plannedQoE" placeholder="" style="width: 260px;" >
                        <template #append>亿</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="此月计划日耗煤:" prop="plannedDailyConsumption">
                    <el-input type="number" v-model="formForecast.plannedDailyConsumption" placeholder="" style="width: 260px;" >
                        <template #append>万吨</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="此月运行机组数量:" prop="plannedUnitsToRun">
                    <el-input type="number" v-model="formForecast.plannedUnitsToRun" placeholder="" style="width: 260px;" >
                        <template #append>个</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="此月每机日耗煤:" prop="plannedDailyUnitConsumption">
                    <el-input type="number" v-model="formForecast.plannedDailyUnitConsumption" placeholder="" style="width: 260px;" >
                        <template #append>万吨</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 180px;" @click="postCoalInPlanPredict(ruleForecastFormRef)">
                    生成接卸预测报告
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/预测 -->
    <el-dialog v-model="forecastVisible" title="煤炭接卸预测" width="1500" :align-center="true">
        <div class="dialog_main">
            <div class="forecast_title">
                煤船接卸预测表 {{ PredictData.predictedTime }}
            </div>
            <!-- <el-form :inline="true" :model="formForecast">
                <el-form-item label="本月计划电量:">
                    <el-input type="number" v-model="formForecast.plannedQoE" placeholder="" style="width: 180px;" >
                        <template #append>亿</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="计划日耗煤:">
                    <el-input type="number" v-model="formForecast.plannedDailyConsumption" placeholder="" style="width: 180px;" >
                        <template #append>万吨</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="运行机组数量:">
                    <el-input type="number" v-model="formForecast.plannedUnitsToRun" placeholder="" style="width: 180px;" >
                        <template #append>个</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每日耗煤:">
                    <el-input type="number" v-model="formForecast.plannedDailyUnitConsumption" placeholder="" style="width: 180px;" >
                        <template #append>万吨</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#2565C8" @click="postCoalInPlanPredict">设置</el-button>
                </el-form-item>
            </el-form> -->
            <div class="table_info">
                <table>
                    <tr>
                        <th>序号</th>
                        <th>航次</th>
                        <th>船名</th>
                        <th>供应商</th>
                        <th>靠泊码头</th>
                        <th>计划靠泊时间</th>
                        <th>计划离岸时间</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>来煤重量</th>
                        <th>到厂前库存</th>
                        <th>加船上库存</th>
                        <th>入厂质量验收</th>
                    </tr>
                    <tr v-for="(item,index) in PredictData.records" :key="index">
                        <th>{{ item.number }}</th>
                        <td>{{ item.shipNo }}</td>
                        <td>{{ item.shipName }}</td>
                        <td>{{ item.suplier }}</td>
                        <td>{{ item.berthingDock }}</td>
                        <td>
                            <span class="red">{{ item.planInTime?.substring(0, 10) }}</span>
                        </td>
                        <td>
                            <span class="red">{{ item.planOutTime?.substring(0, 10) }}</span>
                        </td>
                        <td>{{ item.coalType }}</td>
                        <td>{{ item.hotValue }}</td>
                        <td>{{ item.planWeight }}</td>
                        <td>{{ item.calculatedInventory }}</td>
                        <td>{{ item.inventoryWithPlanWeight }}</td>
                        <td>{{ item.entryQuality }}</td>
                    </tr>
                    <tr class="table_bg">
                        <td colspan="9"></td>
                        <td></td>
                        <td>月末库存(预测)</td>
                        <td>{{ PredictData.predictedInventoryEoM }}</td>
                        <td></td>
                    </tr>
                </table>
                <div class="remark">
                    <strong>备注：</strong>
                    <div>
                        <p v-for="(item,index) in PredictData.remarks" :key="index">
                            {{ item }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;">
                    下载
                </el-button>
            </div>
        </template>
    </el-dialog>


    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- search -->
    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline"  >
            <el-form-item label="航次:" prop="shipNo">
                <el-input v-model="searchForm.shipNo" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="船名:" prop="shipName">
                <el-input v-model="searchForm.shipName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="靠岸(实际)时间:" prop="searchFormTime">
                <el-date-picker style="width: 240px;" v-model="searchForm.searchFormTime" 
                type="daterange" 
                value-format="YYYY-MM-DD" 
                :shortcuts="shortcuts" 
                unlink-panels 
                start-placeholder="开始时间"
                end-placeholder="结束时间" 
                @change="changeSearchTime" />
            </el-form-item>
            <el-form-item label="状态:" prop="currentStatus">
                <el-select v-model="searchForm.currentStatus" placeholder="请选择" style="width: 150px">
                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="getBunkerInRecordList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="forecastTimeVisible = true,resetForecastForm(ruleForecastFormRef)">煤船接卸预测</el-button>
            <el-button type="primary" color="#2565C8">导出</el-button>
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true,resetAddForm(ruleFormRef)">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" :data="listTableData" size="large" :border="false" :stripe="false"
                :highlight-current-row="false" :height="tableHeight" :header-cell-style="headerCellStyle"
                style="width: 100%;" :row-class-name="rowClassName" ref="multipleTableRef"
                @selection-change="handleSelectionChange">

                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>计划到厂时间</th>
                                        <th>计划靠泊时间</th>
                                        <th>计划来煤重量</th>
                                        <th>实际靠岸时间</th>
                                        <th>实际离岸时间</th>
                                        <th>
                                            <div style=" display: flex;align-items: center;justify-content: center;">
                                                实际来煤重量
                                                <el-popover placement="bottom" :width="200" trigger="hover"
                                                    :content="'备注/原因：'+props.row.remark">
                                                    <template #reference>
                                                        <el-icon color="#91A2BE">
                                                            <QuestionFilled />
                                                        </el-icon>
                                                    </template>
                                                </el-popover>
                                            </div>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>{{ props.row.planArriveTime }}</td>
                                        <td>{{ props.row.planInTime }}</td>
                                        <td>{{ props.row.planWeight }}</td>
                                        <td>{{ props.row.actureInTime }}</td>
                                        <td>{{ props.row.actureOutTime }}</td>
                                        <td>{{ props.row.actureWeight }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="航次" prop="shipNo" />
                <el-table-column label="船名" prop="shipName" />
                <el-table-column label="供应商" prop="suplierId" >
                    
                    <template #default="props">
                        {{ props.row.supplierName }}
                        <span v-for="item in supplierData">
                            <span v-if="props.row.suplierId == item.id">{{ item.supplierName }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="靠泊码头" prop="berthingDock" />
                <el-table-column label="入厂质量验收" prop="entryQuality" />
                <el-table-column label="靠岸时间偏差" prop="inTimeOffset" />
                <el-table-column label="离岸时间偏差" prop="outTimeOffset" />
                <el-table-column label="重量偏差" prop="planWeight">
                    <template #default="props">
                        <p :class="props.row.planWeight>=props.row.actureWeight?'green':'yellow'" >{{ props.row.planWeight - props.row.actureWeight }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="currentStatus" >
                    <!-- 当前状态,0-未到达,1-已到达、未离岸,2-已到达、已离岸 -->
                    <template #default="props">
                        <p v-if="props.row.currentStatus == 0">未到达</p>
                        <p v-if="props.row.currentStatus == 1">已到达、未离岸</p>
                        <p v-if="props.row.currentStatus == 2">已到达、已离岸</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="170">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelCoalInPlan(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="clickShowEditDialog(scope.row.id)">修改</a>|
                            <a href="javascript:;" @click="getCoalInPlanInfo(scope.row.id)">详情</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="getBunkerInRecordList" :total="totalPage"  background layout="prev, pager, next" />
        </div>
    </div>
    
</template>
<style scoped lang="scss">
.add_supl{
    flex-shrink: 0;
    margin-left: 10px;
    cursor: pointer;
}
::v-deep(.el-table__body-wrapper) {
    background: #F6FAFE !important;
}

::v-deep(.el-table__inner-wrapper:before) {
    display: none; //下边线
}

::v-deep(.el-table thead th) {
    color: #333 !important;
    background: #CCDDF9;
}

::v-deep(.el-table__body) {
    border-spacing: 0px 13px !important;
}

::v-deep(.el-table__row td) {
    border-top: 1px solid #E0E5ED !important;
    border-bottom: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:first-child) {
    border-left: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:last-child) {
    border-right: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row:hover td) {
    background: #ecf5ff !important;
}

::v-deep(.el-table__expanded-cell) {
    border: 1px solid #E0E5ED !important;
    padding: 0 !important;
    //border-top: none !important; 
}

// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
    background-color: #ecf5ff !important;
}

::v-deep(.el-table__row.selected-row td) {
    background: #FFDE9A !important;
}
</style>